<template>
  <el-dialog
    :visible.sync="visible"
    width="1000px"
    title="方案管理"
    :before-close="handle_close"
    append-to-body
  >
    <el-table 
      :data="tableData"
      v-loading="loading"
      border
      style="width: 100%"
      :header-cell-style="{background: '#eef1f6', color:'#000', padding: '6px 0', 'font-size': '12px', 'font-weight': '500'}"
    >
      <el-table-column label="方案名称" prop="logName" align="center"></el-table-column>
      <el-table-column label="区域" prop="areaName" align="center"></el-table-column>
      <el-table-column label="认领年度" prop="year" align="center"></el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="{ row }">
          {{row.flag == "0" ? "未提交" : "已提交"}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <span class="btn" v-if="row.flag == 0" @click="$emit('edit', row)">查看与编辑</span>
          <span class="btn" v-if="row.flag == 0" @click="showInnerDialog(row)">修改名称</span>
          <span class="btn del" v-if="row.flag == 0" @click="handle_delete(row.logId)">删除</span>
          <span class="btn" v-if="row.flag == 1" @click="$emit('edit', row, false)">查看</span>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      width="400px"
      title="修改方案名称"
      :visible.sync="innerVisible"
      append-to-body
    >
      <el-form ref="innerForm" :rules="innerFormRules" :model="innerForm" label-width="90px" size="small">
        <el-form-item label="方案名称:" prop="logName">
          <el-input v-model="innerForm.logName" clearable placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="innerVisible=false" size="small">取消</el-button>
        <el-button type="primary" @click="handle_updateLogName" size="small">提交</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>
<script>
import { $budgetAPI } from "@/api";
import { getCookie } from "@/common/js/cookie";
export default {
  data(){
    return {
      year: '',
      visible: false,
      tableData: [],
      loading: false,
      innerVisible: false,
      innerForm: {
        logName: '',
        logId: null
      },
      innerFormRules: {
        logName: [{required: true, message: '必填', trigger: 'change'}]
      }
    }
  },
  methods: {
    init(year){
      this.visible = true;
      this.year = year
      this.getData();
    },
    getData(){
      this.loading = true;
      $budgetAPI.claimQueryPlan({
        year: this.year,
        token: getCookie("token")
      },
      res =>{
        this.alertError(res);
        this.loading = false;
        this.tableData = res.content;
      },
      err => {
        this.alertError(err);
        this.loading = false;
      })
    },
    showInnerDialog(row){
      this.innerForm.logName = row.logName;
      this.innerForm.logId = row.logId;
      this.innerVisible = true;
    },
    async handle_updateLogName(){
      await this.$refs.innerForm.validate();
      $budgetAPI.claimUpdateName({
        token: getCookie("token"),
        ...this.innerForm
      }, 
      res => {
        this.alertError(res);
        if(res.code == 0){
          this.getData();
          this.innerVisible = false;
          this.$message.success("修改方案名称成功");
        }
      },
      err => {
        this.alertError(err);
      })
    },
    async handle_delete(logId){
      await this.$confirm('确认删除该条方案吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      });
      $budgetAPI.claimDeletePlan({
        token: getCookie("token"),
        logId 
      }, 
      res => {
        this.alertError(res);
        if(res.code == 0){
          this.getData();
          this.$message.success("删除方案成功");
        }
      },
      err => {
        this.alertError(err);
      })
    },
    handle_close(){
      this.visible = false;
    },
  }
}
</script>
<style lang="scss" scoped>
  /deep/ .el-table {
    .el-table__row {
      .cell {
        font-size: 13px !important;
      }
    }
  }
  /deep/ .el-form-item__label {
		font-size: 13px;
		padding-right: 10px;
		line-height: 32px !important;
	}
  .btn {
    font-size: 12px;
    color: #55a7ff;
    margin-right: 6px;
    user-select: none;
    cursor: pointer;
    transition: color .2s;
    &:hover {
      color: #6db4ff;
    }
    &:active {
      color: #3597ff;
    }
    &.del {
      color: red;
      &:hover{
        color: rgb(255, 104, 104);
      }
      &:active{
        color: rgb(255, 0, 0);
      }
    }
  }
</style>